<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {},
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.init(this.data);
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
  },
  methods: {
    handleNum(val, fix = 1){
      return val || val === 0 ? Number((val * 1).toFixed(fix)): val
    },
    init(newData) {
      const data1 = [], // 平均停电时间
        data2 = [], // 预安排平均停电时间
        data3 = [], // 故障平均停电时间
        data4 = [], // 平均停电时间比增降
        data5 = [], // 预安排平均停电时间比增降
        data6 = [], // 故障平均停电时间比增降
        category = []; // x轴-线路名称
        // console.log(newData,'newData-----------');
        
      newData.filter(item => (Number(item.avgOutage) || Number(item.scheduled) || Number(item.fault) || Number(item.prevAvgOutageRate) || Number(item.prevScheduledRate) || Number(item.prevFaultRate))).forEach((item) => {
        data1.push(this.handleNum(item.avgOutage));
        data2.push(this.handleNum(item.scheduled));
        data3.push(this.handleNum(item.fault));
        data4.push(this.handleNum(item.prevAvgOutageRate, 0));
        data5.push(this.handleNum(item.prevScheduledRate, 0));
        data6.push(this.handleNum(item.prevFaultRate, 0));
        category.push(item.lineName);
      });
      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          formatter: function (params) {
            // 添加单位
            var result = params[0].name + "<br>";
            params.forEach(function (item) {
              if (item.value) {
                if (item.seriesName.includes("比")) {
                  result +=
                    item.marker +
                    " " +
                    item.seriesName +
                    " : " +
                    item.value +
                    "%</br>";
                } else {
                  result +=
                    item.marker +
                    " " +
                    item.seriesName +
                    " : " +
                    item.value +
                    "</br>";
                }
              } else {
                result += item.marker + " " + item.seriesName + " :  - </br>";
              }
            });
            return result;
          },
        },
        legend: {
          width: 340,
          //   data: ["已安装", "计划安装", "安装率"],
          top: "22",
          icon: "circle",
          itemWidth: 9,
          textStyle: {
            color: "#607FB5",
            fontSize: 8,
          },
        },
        grid: {
          left: "19",
          right: "-35",
          bottom: "16",
          top: "85",
          containLabel: true,
        },
        xAxis: {
          data: category,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#153877",
            },
          },
          axisLabel: {
            fontSize: "10",
            // interval: 0,
            rotate:45,
            fontWeight: 400,
            color: "#607FB5",
          },
          axisTick: {
            show: false,
          },
        },
        dataZoom: [
          {
            show: category.length > 5,
            type: "slider",
            xAxisIndex: [0, 5],
            zoomLock: true,
            // width: 7,
            height: 7,
            bottom: 0,
            // right: 12,
            borderWidth: 0,
            borderColor: "transparent",
            backgroundColor: "rgba(4,42,102,0.7)",
            fillerColor: "#043D92",
            borderRadius: 10,
            handleSize: 0,
            showDetail: false,
            start: 0,
            end: 4 / (category.length || 4) * 100,
            brushSelect: false,
            filterMode: "filter",
            showDataShadow: false,
            realtime: true,
            // height: "72%",
            // top: "20%",
            textStyle: {
              color: "transparent",
            },
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: false,
              lineStyle: {
                color: "#607FB5",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#607FB5",
              },
            },
            axisLabel: {
              fontSize: "10",
              fontWeight: 800,
              formatter: "{value}",
            },
          },
          {
            show: false,
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value}% ",
            },
          },
        ],
        series: [
          {
            name: "平均停电时间",
            type: "bar",
            barWidth: 9,
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
              color: new graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#A2CBFF" },
                { offset: 1, color: "#2E7FF6" },
              ]),
            },
            data: data1,
          },
          {
            name: "预安排平均停电时间",
            type: "bar",
            barWidth: 9,
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
              color: new graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#95F4CF" },
                { offset: 1, color: "#53C0AA" },
              ]),
            },
            data: data2,
          },
          {
            name: "故障平均停电时间",
            type: "bar",
            barWidth: 9,
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
              color: new graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#E77F54" },
                { offset: 1, color: "#F7D5C7" },
              ]),
            },
            data: data3,
          },
          {
            name: "平均停电时间比增降",
            type: "line",
            smooth: false,
            showAllSymbol: false,
            symbol: "emptyCircle",
            symbolSize: 6,
            showSymbol: false,
            yAxisIndex: 1,
            boundaryGap: false,
            connectNulls: true,
            clip: false,
            itemStyle: {
              color: "#EFEC73",
            },
            lineStyle: {
              width: 2, // 设置线宽
            },
            data: data4,
          },
          {
            name: "预安排平均停电时间比增降",
            type: "line",
            smooth: false,
            showAllSymbol: false,
            symbol: "emptyCircle",
            symbolSize: 6,
            showSymbol: false,
            yAxisIndex: 1,
            boundaryGap: false,
            connectNulls: true,
            clip: false,
            itemStyle: {
              color: "#7146CF",
            },
            lineStyle: {
              width: 2, // 设置线宽
            },
            data: data5,
          },
          {
            name: "故障平均停电时间比增降",
            type: "line",
            smooth: false,
            showAllSymbol: false,
            symbol: "emptyCircle",
            symbolSize: 6,
            showSymbol: false,
            yAxisIndex: 1,
            boundaryGap: false,
            connectNulls: true,
            clip: false,
            itemStyle: {
              color: "#AF3AB3",
            },
            lineStyle: {
              width: 2, // 设置线宽
            },
            data: data6,
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
